<template>
  <div class="tree-container">
    <el-tree
      class="tree-line"
      ref="treeRef"
      :data="treeData"
      :node-key="_treeOptions.nodeKey"
      :props="_treeOptions.defaultProps"
      :show-checkbox="_treeOptions.showCheckbox"
      :default-expand-all="_treeOptions.defaultExpandAll"
      :expand-on-click-node="_treeOptions.expandOnClickNode"
      :empty-text="_treeOptions.emptyText"
      :render-content="_treeOptions.renderContent"
      :highlight-current="_treeOptions.highlightCurrent"
      :check-on-click-node="_treeOptions.checkOnClickNode"
      :auto-expand-parent="_treeOptions.autoExpandParent"
      :default-expanded-keys="_treeOptions.defaultExpandedKeys"
      :check-strictly="_treeOptions.checkStrictly"
      :default-checked-keys="_treeOptions.defaultCheckKeys"
      :current-node-key="_treeOptions.currentNodeKey"
      :filter-node-method="_treeOptions.filterNodeMethod"
      :accordion="_treeOptions.accordion"
      :indent="_treeOptions.indent"
      :icon="_treeOptions.icon"
      :draggable="_treeOptions.draggable"
      @node-click="handleNodeClick"
      @check-change="handleCheckChange"
      @current-change="handleCurrentChange"
      @check="handleCheck"
    >
      <template #default="{ data, node }">
        <span>
          {{ node.label }}
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup lang="ts">
// 父组件传递数据
const props = defineProps({
  treeOptions: {
    default() {
      return {};
    },
    type: Object,
  },
  treeData: {
    default() {
      return [];
    },
    type: Array,
  },
});

// tree ref
const treeRef = ref();

// 配置
const _treeOptions = computed(() => {
  const option = {
    defaultProps: {
      children: 'children',
      label: 'name',
    },
    nodeKey: 'id',
    showCheckbox: false,
    defaultExpandAll: true,
    expandOnClickNode: false,
    emptyText: '暂无数据',
    renderContent: null,
    highlightCurrent: false,
    checkOnClickNode: false,
    autoExpandParent: true,
    defaultExpandedKeys: [],
    checkStrictly: false,
    defaultCheckKeys: [],
    currentNodeKey: null,
    filterNodeMethod: null,
    accordion: false,
    indent: 18,
    icon: '',
    draggable: false,
  };
  let obj = Object.assign(option, props?.treeOptions);
  obj.defaultProps.class = customNodeClass;
  return obj;
});

// 节点添加动态class
const customNodeClass = (data, node) => {
  let classNames = [];
  if (data.isPenultimate) classNames.push('is-penultimate');
  classNames.push(`level${node.level}`);
  return classNames.join(' ');
};

// 定义暴露事件名
const emit = defineEmits([
  'node-click', // 当节点被点击的时候触发
  'check-change', // 当复选框被点击的时候触发
  'current-change', // 当前选中节点变化时触发的事件
  'check', // 点击节点复选框之后触发
]);

// 当节点被点击的时候触发
const handleNodeClick = (...params) => {
  emit('node-click', ...params);
};

// 当复选框被点击的时候触发
const handleCheckChange = (...params) => {
  emit('check-change', ...params);
};

// 当前选中节点变化时触发的事件
const handleCurrentChange = (...params) => {
  emit('current-change', ...params);
};

// 点击节点复选框之后触发
const handleCheck = (...params) => {
  emit('check', ...params);
};

// 重置tree
const resetChecked = () => {
  treeRef.value!.setCheckedKeys([], false);
};

defineExpose({
  resetChecked: resetChecked,
});
</script>

<style lang="scss" scoped>
.tree-container {
  width: 100%;
  height: calc(100vh - 400px);
  background-color: #fff;
  overflow-y: auto;
  ::v-deep .el-tree {
    color: #606266;
    .el-tree-node__content {
      height: 30px;
    }
    // 一行展示
    .el-tree-node.is-expanded.is-penultimate > .el-tree-node__children {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    // // 虚线
    // .el-tree-node {
    //   position: relative;
    // }
    // .el-tree-node__children {
    //   padding-left: 16px; // 缩进量
    // }
    // .el-tree-node::before {
    //   content: '';
    //   width: 22px;
    //   height: 100%;
    //   position: absolute;
    //   left: -2px;
    //   top: -25px;
    //   border-width: 1px;
    //   border-left: 1px dashed #ccc;
    // }
    // // 当前层最后⼀个节点的竖线⾼度固定
    // .level2:last-child::before {
    //   height: 38px; // 可以⾃⼰调节到合适数值
    // }
    // // 横线
    // .el-tree-node::after {
    //   content: '';
    //   width: 22px;
    //   height: 20px;
    //   position: absolute;
    //   left: -3px;
    //   top: 15px;
    //   border-width: 1px;
    //   border-top: 1px dashed #ccc;
    // }
    // .level3::before {
    //   content: '';
    //   width: 0px;
    //   height: 0px;
    // }
    // .level3::after {
    //   content: '';
    //   width: 0px;
    //   height: 0px;
    // }
    // // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
    // & > .el-tree-node::after {
    //   border-top: none;
    // }
    // & > .el-tree-node::before {
    //   border-left: none;
    // }
  }
}
</style>
